<template>
	<view :style="[AppSkinVar]">
		<view class="welcome e-font-56">{{ title }}</view>
		<view class="item e-flex  e-m-b-40">
			<image class="img-36 e-m-r-30" src="../static/public/phone.png"></image>
			<e-input type="number" v-model="formData.login" border="none" :placeholder="toI18('请输入您的手机号/邮箱')" />
		</view>
		<view class="item e-flex  e-m-b-40">
			<image class="img-36  e-m-r-30" src="../static/public/shield.png"></image>
			<e-input v-model="formData.validCode" border="none" :placeholder="toI18('请输入验证码')" />
			<e-code-button ref="eCodeRef"  :start-text="toI18('获取验证码')"
				:change-text="toI18('X秒重新获取')" :end-text="toI18('重新获取')" size="small" type="primary" shape="circle"
				 @click="getCode"></e-code-button>
		</view>
		<view class="item e-flex  e-m-b-40">
			<image class="img-36  e-m-r-30" src="../static/public/password.png"></image>
			<e-input v-model="formData.onePassword" border="none" :placeholder="toI18('6-12位字母与数字组合')" passwordIconShow
				type="password" />
		</view>
		<view class="item e-flex  e-m-b-40">
			<image class="img-36  e-m-r-30" src="../static/public/password.png"></image>
			<e-input v-model="formData.twoPassword" border="none" :placeholder="toI18('请确认登录密码')" passwordIconShow
				type="password" />
		</view>
		<button class="sub-btn bg-primary" :style="[boxShadowColor]" :class="{ 'is-ok': !isOk }" @tap="submit">{{ $t('common.确认') }}</button>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed,watch } from 'vue'
	import { postResetLoginPassword,postPasswordSms } from '@/common/request/api'
	import {
		useI18n,
		useCurrentInstance
	} from '@/common/hooks'
	import type {
		CodeInstance
	} from '@/uni_modules/endless-ui/typing'
	import {throttle} from '@/common/utils'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { useUser } from '@/common/stores'
	import { storeToRefs } from 'pinia'

	const ctx = useCurrentInstance()
	
	const toI18 = useI18n('public')
	
	// const userStore = useUser()
	// const { countryArea, countryAreaList } = storeToRefs(userStore)
	

	
	const isOk = ref(false)
	
	const formData = reactive({
		login: '',
		validCode: '',
		onePassword: '',
		twoPassword: ''
	})
	
	watch(formData, (newVal) => {
		for (let i in newVal) {
			if (!newVal[i]) {
				isOk.value = false
				return
			} else {
				isOk.value = true
			}
		}
	}, {
		deep: true
	})
	
	const title = ref('')
	
	const boxShadowColor = computed(() => {
		return {
			boxShadow: `0 12rpx 24rpx 0 ${ctx.AppSkin.primary.replace('1)', '0.3)')}`
		}
	})
	
	
	
	const eCodeRef = ref<CodeInstance>(null)
	

	
	const getCode = () => {
		if (!formData.login) {
			ctx.$toastApp(toI18('请输入您的手机号'))
			return
		}
		
		postPasswordSms(formData.login, { areaCode:"86" }).then(res => {
			eCodeRef.value?.start()
		})
	}
	
	const submit = throttle(function () {
		if (!isOk.value) return
		
		if (formData.twoPassword !== formData.onePassword) {
			ctx.$toastApp(toI18('两次密码不一致'))
			return
		}
		postResetLoginPassword({
			username: formData.login,
			password: formData.onePassword,
			validcode: formData.validCode
		}).then(res => {
			if (res.code == 200) {
				ctx.$back()
			}
			ctx.$toastApp(res.msg)
		})
	},1000)
	
	onLoad((opt) => {
		// if (!countryAreaList.value.length) {
		// 	userStore.getCountryAreaList()
		// }
		if (opt?.type == 1) {
			title.value = toI18('修改密码')
		}else{
			title.value = toI18('忘记密码')
		}
	})

</script>
<style>
	page {
		background-color: #ffffff;
		padding: 0 72rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	:deep(.e-button--small){
		padding: 0 40rpx;
	}

.welcome {
	width: 610rpx;
	margin: auto;
	padding: 80rpx 0;
	font-weight: 600;
}

.item {
	background: #F7F7F7;
	border-radius: 50rpx;
	height: 90rpx;
	padding: 0 20rpx 0 40rpx;
}
.code-btn {
	height: 60rpx;
	line-height: 60rpx;
	letter-spacing: 2rpx;
	border-radius: 30px;
}

.sub-btn {
	width: 600rpx;
	height: 88rpx;
	color: #ffffff;
	font-size: 34rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
	border-radius: 44rpx;
	margin: auto;
}
</style>
